<template>
    <div>
        <el-form
                ref="formRef"
                :model="form"
                :rules="rules"
                label-width="100px"
                style="margin-top: 10px"
        >
            <el-form-item label="主图" prop="mainImg">
                <!--         <el-input style="width:500px" v-model="pageContent.ref_model"></el-input>-->
                <img v-if="form.main_img && form.main_img.resourceUrl != '' "
                     :src="form.main_img.resourceUrl"
                     class="avatar" style="cursor: pointer" @click="visibleMainImgSelector = true"/>
                <el-icon v-else class="avatar-uploader-icon" @click="visibleMainImgSelector = true">
                    <Plus/>
                </el-icon>
            </el-form-item>
            <el-form-item label="页面简介" prop="des">
                <el-input v-model="form.des" type="textarea"
                ></el-input>
            </el-form-item>
            <el-form-item label="引用文章" prop="article">
                <el-input
                        style="width: 400px"
                        v-model="form.ref_article.title"
                        disabled
                ></el-input>
                <el-button
                        style="margin-left: 20px"
                        type="primary"
                        @click="articlePreView(form.ref_article)"
                >预览
                </el-button
                >
                <el-button type="warning" @click="visible = true">选择</el-button>
            </el-form-item>
            <el-form-item align="center">
                <el-row style="width:100%;">
                    <el-col :span="20">
                        <div class="grid-content ep-bg-purple"/>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" @click="commit(form, itemIndex)">确定</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>

        <el-dialog
                v-model="visibleMainImgSelector"
                width="1300px"
                destroy-on-close
                :close-on-click-modal="false"
        >
            <imageSelector :update="updateMainImg"/>
        </el-dialog>

        <el-dialog
                v-model="visible"
                width="1000px"
                destroy-on-close
                :close-on-click-modal="false"
        >
            <ArticleSelector :update="updateArticle"></ArticleSelector>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
    import {ElMessage, FormInstance, FormRules, UploadProps} from "element-plus";
    import {ref} from "vue";
    import base from "../utils/base";
    import imageSelector from "./image-selector.vue";

    const visible = ref(false);
    const visibleMainImgSelector = ref(false);

    const props = defineProps({
        data: {
            type: Object,
            required: true,
        },
        index: {
            type: Number,
            required: false,
        },
        update: {
            type: Function,
            required: true,
        },
    });

    const defaultData = {
        main_img: {
            resourceUrl: ""
        },
        des: "",
        ref_article: {
            title: ""
        }
    };


    const itemIndex = ref(props.index)
    const form = props.data ? ref(props.data) : ref(defaultData);

    const formRef = ref<FormInstance>();

    const commit = () => {
        props.update(form.value, itemIndex.value);
    };

    const updateMainImg = (content) => {
        form.value.main_img = content;
        visibleMainImgSelector.value = false;
    }

    const articlePreView = (item) => {
        if (item && item.title != '')
            window.open(`${base.newsroom}/article/${item.id}?token=${localStorage.getItem("token")}`, "_blank");
    };

    const updateArticle = (item) => {
        // newsTable.value.push(item);
        form.value.ref_article = item;
        visible.value = false;
    };
</script>

<style>

    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
        cursor: pointer;
    }

    .avatar {
        width: 300px;
    }
</style>
